<template>
  <div class="setting_info">
    <el-row>
      <el-col class="label_name" :span="24">修改密码</el-col>
      <el-col :span="6">
        <el-input disabled placeholder="******" size="mini" />
      </el-col>
      <el-col :span="18" class="gl_pl_20">
        <el-button type="primary" size="mini" @click="openUpdateDialog">修改密码</el-button>
      </el-col>
    </el-row>
    <!-- <el-row v-if="env !== 'version'" class="gl_pt_10"> -->
    <el-row class="gl_pt_10">
      <el-col class="label_name" :span="24">绑定邮箱</el-col>
      <el-col :span="6">
        <el-input disabled :placeholder="bindEmailPlaceholder" size="mini" />
      </el-col>
      <el-col :span="18" class="gl_pl_20">
        <el-button type="primary" size="mini" @click="openbindEmailDialog">绑定邮箱</el-button>
      </el-col>
    </el-row>
    <!-- <el-row v-if="env !== 'version'" class="gl_pt_10"> -->
    <el-row class="gl_pt_10">
      <el-col class="label_name" :span="24">绑定微信</el-col>
      <el-col :span="6">
        <div v-if="bindMsg.wx">已绑定</div>
        <div v-else class="unhave">未绑定</div>
      </el-col>
      <el-col :span="18" class="gl_pl_20">
        <el-button v-if="bindMsg.wx" type="primary" size="mini" @click="unbindWx">解除绑定</el-button>
        <el-button v-else type="primary" size="mini" @click="openbindWxDialog">绑定微信</el-button>
      </el-col>
    </el-row>
    <edit-password ref="editPassword" />
    <edit-email ref="editEmail" />
    <wx-bind ref="editWx" />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import editPassword from './editPassword';
import editEmail from './editEmail';
import wxBind from '@/plugin/wxCenter/bind';
import { api_POST_IdentityUserWechatUnbind } from '@/extend/api/base.js';
export default {
  components: {
    editPassword,
    editEmail,
    wxBind
  },
  data() {
    return {
      env: process.env.VUE_APP_DIREVTOR
    };
  },
  computed: {
    ...mapState({
      info: state => state.user.info
    }),
    bindEmailPlaceholder() {
      return this.info.emailConfirmed && this.info.email || '';
    },
    bindMsg() {
      return { wx: this.info.isWeChatBound };
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
  methods: {
    ...mapActions({ getInfo: 'user/getInfo' }),
    openUpdateDialog() {
      this.$refs.editPassword.open();
    },
    openbindEmailDialog() {
      this.$refs.editEmail.open();
    },
    openbindWxDialog() {
      this.$refs.editWx.gowxlogin();
    },
    unbindWx() {
      const that = this;
      this.$confirm(`您确定要清除绑定微信账号吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_POST_IdentityUserWechatUnbind().then(res => {
            that.getInfo();
            that.$message({ type: 'success', message: '解绑成功' });
          }, error => {
            this.$message({ type: 'error', message: error.error && error.error.message || '' });
          });
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style scoped>
.unhave {
  color: red;
}
</style>
<style>
.setting_info .label_name {
  color: #353434;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  margin-bottom: 6px;
}
</style>
